<template>
  <div id="custom_save">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit"><i class="el-icon-edit-outline"/>自定义数据详情</span>
      </div>
      <div id="customDesc">

        <div class="box">
          自定义数据名称：<el-input v-model="dataName"/>
        </div>
        <el-button @click="addRow()">
          添加行
        </el-button>
        <el-button @click="addCell()">
          添加列
        </el-button>

        <table style="margin-left:42px;">
          <thead
            ref="delTab"
            @click="delCells($event)"
            v-html="delCell"
          />
        </table>
        <div
          ref="delTh"
          class="delTh"
          @click="delRows($event)"
        />
        <table>
          <thead
            ref="thead"
            v-html="thstr"
          />

          <tbody
            ref="tbody"
            v-html="str"
          />
        </table>

      </div>
      <div id="customData">
        <el-button @click="addkey()">
          新增
        </el-button>
        <div
          v-for="(item,index) in keyvalue"
          :key="index"
          class="dataBox"
        >
          <el-input v-model="item.key"/>
          <el-input v-model="item.value"/>
          <span class="desc_del" @click="delkey(index)">删除</span>
        </div>
      </div>
      <div id="dataDesc">
        <p>自定义数据描述：</p>
        <el-input
          :rows="2"
          v-model="textarea"
          type="textarea"
          placeholder="请输入内容"
        />
      </div>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >提交</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { cdsDesc, cdsSave } from '@/api/page'

export default {
  data() {
    return {
      data: {
        id: ''
      },
      updata: [],
      str: '',
      thstr: '',
      delCell: '',
      delRow: '',
      dataName: '',
      textarea: '',
      form: [],
      datas: [],
      arras: {},
      keyvalue: [],
      row: 0,
      cell: 0
    }
  },
  mounted() {
    this.data.id = localStorage.getItem('customid')
    this.data.pid = localStorage.getItem('pid')
    cdsDesc(this.data)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          var keyValues = response.data.data.keyValuesJson

          this.form = response.data.data.forValuesJson
          this.dataName = response.data.data.name
          this.textarea = response.data.data.decrypt

          var obj = {}

          for (var key in keyValues) {
            obj.key = key
            obj.value = keyValues[key]
            this.keyvalue.push(obj)
            obj = {}
          }

          for (var key in this.form[0]) {
            this.addCell_up(key)
          }
          this.addRow_up()
        } else {
          alert(response.message)
        }
      })
      .catch(error => {
        // alert(error.response);
      })
  },
  methods: {
    addCell() {
      var cellTabth = document.createElement('th')
      var celltab = document.createElement('button')
      celltab.className = 'cell-' + this.cell + ''
      cellTabth.className = 'delCell'
      celltab.textContent = '删除'
      cellTabth.appendChild(celltab)
      this.$refs.delTab.appendChild(cellTabth)

      var delTabth = document.createElement('th')
      var delTabinp = document.createElement('input')

      delTabth.className = 'cell-' + this.cell + ''
      delTabth.appendChild(delTabinp)
      this.$refs.thead.appendChild(delTabth)

      for (var j = 0; j < this.$refs.tbody.children.length; j++) {
        var inputObj = document.createElement('input')
        var tdObj = document.createElement('td')
        tdObj.className = 'cell-' + this.cell
        tdObj.appendChild(inputObj)

        this.$refs.tbody.children[j].appendChild(tdObj)
      }
      this.cell++
    },
    addCell_up(key) {
      var cellTabth = document.createElement('th')
      var celltab = document.createElement('button')
      celltab.className = 'cell-' + this.cell + ''
      cellTabth.className = 'delCell'
      celltab.textContent = '删除'
      cellTabth.appendChild(celltab)
      this.$refs.delTab.appendChild(cellTabth)

      var delTabth = document.createElement('th')
      var delTabinp = document.createElement('input')
      delTabinp.type = 'text'
      delTabinp.value = key
      delTabth.className = 'cell-' + this.cell + ''
      delTabth.appendChild(delTabinp)
      this.$refs.thead.appendChild(delTabth)

      this.cell++
    },
    addRow() {
      if (this.$refs.thead.children.length > 0) {
        var delThObj = document.createElement('button')
        console.log(this.row)
        delThObj.className = this.row
        delThObj.textContent = '删除'
        this.$refs.delTh.appendChild(delThObj)

        var trObj = document.createElement('tr')
        this.row++

        for (var j = 0; j < this.row; j++) {
          trObj.className = j
        }

        for (var i = 0; i < this.$refs.thead.children.length; i++) {
          var inputObj = document.createElement('input')
          var tdObj = document.createElement('td')
          tdObj.className = 'cell-' + i

          tdObj.appendChild(inputObj)
          trObj.appendChild(tdObj)
        }

        this.$refs.tbody.appendChild(trObj)
      }
    },
    addRow_up() {
      var rowKey

      for (var i = 0; i < this.form.length; i++) {
        var delThObj = document.createElement('button')
        delThObj.className = this.row
        delThObj.textContent = '删除'
        this.$refs.delTh.appendChild(delThObj)

        this.row++

        var trObj = document.createElement('tr')

        for (var j = 0; j < this.row; j++) {
          trObj.className = j
        }

        for (var keys in this.form[i]) {
          var inputObj = document.createElement('input')
          var tdObj = document.createElement('td')
          inputObj.type = 'text'
          inputObj.value = this.form[i][keys]
          tdObj.className = 'cell-' + trObj.children.length
          tdObj.appendChild(inputObj)
          trObj.appendChild(tdObj)
        }

        this.$refs.tbody.appendChild(trObj)
      }
    },
    onBack() {
      this.$router.go(-1)
    },
    delCells(event) {
      if (event.target.nodeName === 'BUTTON') {
        var eventClass = event.target.className
        event.target.parentNode.remove()

        for (var i = 0; i < this.$refs.thead.children.length; i++) {
          if (this.$refs.thead.children[i].className == eventClass) {
            this.$refs.thead.children[i].remove()
            // console.log(this.$refs.thead.children[i])
          }
        }

        for (var j = 0; j < this.$refs.tbody.children.length; j++) {
          for (
            var z = 0;
            z < this.$refs.tbody.children[j].children.length;
            z++
          ) {
            if (
              this.$refs.tbody.children[j].children[z].className == eventClass
            ) {
              //   // event.target.remove();
              this.$refs.tbody.children[j].children[z].remove()
            }
          }
          console.log('1')
        }
      }
    },
    delRows(event) {
      if (event.target.nodeName === 'BUTTON') {
        var eventClass = event.target.className
        for (var i = 0; i < this.$refs.delTh.children.length; i++) {
          if (this.$refs.tbody.children[i].className == eventClass) {
            event.target.remove()
            this.$refs.tbody.children[i].remove()
          }
        }
      }
    },

    inputs(keys) {
      for (var i = 0; i < this.form.length; i++) {
        for (var key in this.form[i]) {
          if (key == this.aaa) {
            this.form[i][keys] = this.form[i][key]
            delete this.form[i][key]
          }
        }
      }
    },
    onSubmit() {
      for (var i = 0; i < this.$refs.thead.children.length; i++) {
        this.datas.push(this.$refs.thead.children[i].children[0].value)
      }
      var formData = []

      for (var i = 0; i < this.$refs.tbody.children.length; i++) {
        var obj = {}
        for (var j = 0; j < this.$refs.tbody.children[i].children.length; j++) {
          obj[this.datas[j]] = this.$refs.tbody.children[i].children[
            j
          ].children[0].value
        }
        formData.push(obj)
      }
      var keyValues = {}

      for (var i = 0; i < this.keyvalue.length; i++) {
        if (this.keyvalue[i].key == undefined) {
          alert('')
        } else {
          keyValues[this.keyvalue[i].key] = this.keyvalue[i].value
        }
      }
      this.data.name = this.dataName
      this.data.decrypt = this.textarea
      this.data.forValuesJson = formData
      this.data.keyValues = keyValues

      cdsSave(this.data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.openFullScreen()
          setTimeout(() => {
            this.loading.close()
            this.$router.push('/admin/custom')
          }, 1000)
        }
      })
    },
    addkey() {
      var obj = {}
      this.keyvalue.push(obj)
    },
    delkey(index) {
      this.keyvalue.splice(index, 1)
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },

    returns() {
      this.$router.go(-1)
    }
  }
}
</script>
<style>
#custom_save .dataBox .el-input {
  width: 20%;
}
#custom_save #subjoin {
  height: 40px;
  width: 500px;
}
#custom_save #subjoin .el-input {
  width: 100px;
}
#custom_save .el-input__inner {
  padding: 0 10px;
}
#custom_save .sub {
  position: relative;
  float: left;
  width: 150px;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
#custom_save .sub .el-input__inner {
  height: 28px;
}

#custom_save .sub .el-button--medium {
  padding: 3px 10px;
}
#custom_save .sub .el-button {
  width: 100px;
  height: 28px;
}

#custom_save #tit {
  width: 530px;
  height: 30px;
}
#custom_save #tit div {
  width: 150px;
  height: 28px;
  line-height: 28px;
  float: left;
  border-bottom: 1px solid #ccc;
}
#custom_save #tit div span {
  margin-left: 5px;
}
#custom_save #mainBox {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#custom_save #mainBox #boxTit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#custom_save #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
}
#custom_save #mainBox #boxTit .tit i {
  margin-right: 10px;
}
#custom_save #mainBox .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#custom_save #mainBox .btn .el-button {
  margin-right: 30px;
}
#custom_save .el-form {
  margin: 90px 150px;
  margin-bottom: 20px;
}
#custom_save .next {
  background: #623f18;
  color: #fff;
}
#custom_save .back {
  border-color: #623f18;
  color: #623f18;
}
#custom_save #customDesc {
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 25px;
  min-height: 70px;
}
#custom_save #customDesc .box {
  margin-bottom: 20px;
}
#custom_save #customDesc .box .el-input {
  width: 20%;
}
#custom_save #customData {
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 70px;
}

#custom_save .delTh {
  width: 42px;
  float: left;
  margin-top: 23px;
}
#custom_save .delTh button {
  margin-top: 4px;
}
#custom_save .delCell {
  width: 135px;
}
#custom_save #dataDesc {
  width: 80%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 70px;
}
#custom_save #dataDesc .el-textarea {
  width: 50%;
}

/*改*/
#custom_save .dataBox{
  margin-bottom: 10px;
}
#custom_save .desc_del{
  /*display: inline-block;*/
  width: 60px;
  height: 20px;
  background: red;
  padding: 2px 10px;
  color: #FFFFFF;
  border-radius: 4px;
}
</style>
